<template>
    <div class="top">
        <div id="luck-container" class="luck">
            <div v-for="a in 10" :key="a" class="hongbao animate__animated animate__fadeInDown animate__delay-2s	2s">
                <img @click="events.hb" src="../../img/hongbao.png">
            </div>  
        </div> 
        <div class="mask">
            <div class="mask-top">
                <div class="luck-top">
                    <img src="../../img/head.png">
                </div>    
                <div class="luck-middle">
                    <div>
                        ￥30.00
                    </div>
                </div>  
                <div class="luck-tail">
                    <img src="../../img/tail.png">
                </div> 
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const events = {
    hb() {
       const fugan= document.getElementsByClassName("mask");
       alert();
    }
}
</script>

<style scoped>
.top{
    padding: 50px;

}
img{
    width: 240px;
    height: 220px;
}
.luck{
    display: flex;
    padding: 20px;
    width: calc( 100vw - 100px);
    height: 600px;
    border: 1px solid salmon;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

 
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none; /* 默认不显示 */
  
}

.luck-top img{
    width: 200px;
    height:180px;
    position: relative;
    z-index: 100;
}
.luck-middle div{
    width: 200px;
    height: 50px;
    background-color: antiquewhite;
    size: 30px;
    position: relative;
    top:-80px;
    z-index: 98;
}
.luck-tail img{
    height: 150px;
    width: 200px;
    position: relative;
    top: -168px;
    z-index: 99;
}

.mask-top{
     position: absolute;
     left:calc(100vh - 150px);
     top: 180px;
}

 

</style>